<style lang="less">
@import "../styles/menu.less";
</style>
<template>
  <Menu ref="sideMenu" accordion :active-name="$route.name" :open-names="singleOpenName" :theme="menuTheme" width="auto"
    @on-select="changeMenu">
    <template v-for="item in menuList">
      <template>
        <Submenu :name="item.name" :key="item.name">
          <template slot="title">
            <Icon :type="item.icon" :size="iconSize"></Icon>
            <span class="layout-text">{{ itemTitle(item) }}</span>
          </template>
          <template v-for="child in item.children">
            <MenuItem :name="child.name" :key="'menuitem' + child.name">
            <Icon :type="child.icon" :size="iconSize" :key="'icon' + child.name"></Icon>
            <span class="layout-text" :key="'title' + child.name">{{ itemTitle(child) }}</span>
            </MenuItem>
          </template>
        </Submenu>
      </template>
    </template>
    <Submenu>
      <template slot="title">
        <Icon type="ios-basket" :size="iconSize"></Icon>
        <span class="layout-text">买家订单管理</span>
      </template>
      <MenuItem @on-select="changeMenu" v-for="item in array" :key="item" :name="item.name"
        :to="'/order_' + item.title">
      <Icon type="ios-list" :size="iconSize" :key="'icon' + '订单'"></Icon>
      <span class="layout-text">{{ item.name }}</span>
      </MenuItem>
    </Submenu>

  </Menu>
</template>

<script>
export default {
  name: "sidebarMenu",
  data() {
    return {
      singleOpenName: [],
      array: [
        {
          title: "yzf",
          name: "已支付",
          icon: "ios-list"
        },
        {
          title: "wzf",
          name: "未支付",
          icon: "ios-list"
        },
        {
          title: "yqx",
          name: "已取消",
          icon: "ios-list"
        },
        {
          title: "ywc",
          name: "已完成",
          icon: "ios-list"
        },
        {
          title: "ytk",
          name: "已退款",
          icon: "ios-list"
        }
      ]
    };
  },
  props: {
    menuList: Array,
    iconSize: Number,
    menuTheme: {
      type: String,
      default: "dark"
    },
    openNames: {
      type: Array
    }
  },
  methods: {
    handleSelect(name) {
      console.log(name);

    },
    changeMenu(active) {
      this.$emit("on-change", active);
    },
    handleSelect(name) {
      this.$emit("on-select", name);
    },
    itemTitle(item) {
      return item.title;
    },
    getOpenedNamesByActiveName(name) {
      return this.$route.matched
        .map(item => item.name)
        .filter(item => item !== name);
    }
  },
  updated() {
    this.$nextTick(() => {
      if (this.$refs.sideMenu) {
        this.$refs.sideMenu.updateOpened();
      }
    });
  },
  watch: {
    // 监听路由变化
    $route(to, from) {
      this.singleOpenName = [this.$route.matched[0].name];
    }
  },
  mounted() {
    this.singleOpenName = [this.$route.matched[0].name];
  }
};
</script>
